<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
    <el-button type="primary" @click="copyChartData">复制图表数据</el-button>
  </div>
</template>

<script>
import { Button } from 'element-ui';
import * as echarts from 'echarts';
import {getChart } from '@/api/largeScreen'
export default {
  components: {
    'el-button': Button
  },
  data() {
    return {
      chartData: [
        {
          "hostName": "106.47.172.170",
          "cpu": 0.9,
          "mem": 83.0
        },
        {
          "hostName": "106.47.172.171",
          "cpu": 0.7,
          "mem": 65.0
        },
        {
          "hostName": "106.47.172.172",
          "cpu": 0.5,
          "mem": 50.0
        }
      ],
      chart: null
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.updateChart();
  },
  methods: {
    updateChart() {
      const xAxisData = this.chartData.map(item => item.hostName);
      const cpuData = this.chartData.map(item => item.cpu * 100); // 转换为百分比
      const memData = this.chartData.map(item => item.mem); // 保持为原始数据

      const option = {
       
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['CPU使用率 (%)', '内存使用率 (%)'],
          top: 'top'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 45
          }
        },
        yAxis: [
          {
            type: 'value',
            name: 'CPU (%)',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %'
            }
          },
          {
            type: 'value',
            name: '内存 (%)',
            position: 'right'
          }
        ],
        series: [
          {
            name: 'CPU使用率 (%)',
            type: 'bar',
            data: cpuData,
            itemStyle: { normal: { color: '#ddb926' } },
            label: {
              show: true,
              position: 'top'
            }
          },
          {
            name: '内存使用率 (%)',
            type: 'bar',
            data: memData,
            yAxisIndex: 1, // 使用第二个y轴
            itemStyle: { normal: { color: '#7a8ce9' } },
            label: {
              show: true,
              position: 'top'
            }
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      };

      this.chart.setOption(option);
    },
    copyChartData() {
      const dataString = JSON.stringify(this.chartData, null, 2);
      const el = document.createElement('textarea');
      el.value = dataString;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      alert('数据已复制到剪贴板');
    }
  }
};
</script>


<style scoped>
.chart-container {
  margin: 20px;
  padding: 10px;
  border: 1px solid #ebeef5;
}

.chart {
  width: 100%;
  height: 500px;
  margin-bottom: 20px;
}
</style>
